<div class="content">
  <div class="default-header"><h1>Settings</h1></div>
  <div class="default-content">
    <div class="container mat-elevation-z8">
      <mat-accordion>
        <mat-expansion-panel [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title> Local settings </mat-panel-title>
            <mat-panel-description> Customize your local settings </mat-panel-description>
          </mat-expansion-panel-header>

          <div>
            <mat-checkbox [(ngModel)]="settings.crash_reports"
              >Send anonymous crash reports</mat-checkbox
            >
          </div>

          <!-- <div>
            <mat-checkbox [(ngModel)]="settings.experimental_features"
              >Enable experimental features (WARNING: IT CAN BREAK YOU LABS!)</mat-checkbox
            >
          </div> -->

          <!-- <div>
            <mat-checkbox [(ngModel)]="settings.angular_map"
              >Enable experimental Angular Map (WARNING: IT CAN BREAK YOU LABS!)</mat-checkbox
            >
          </div> -->
        </mat-expansion-panel>

        <mat-expansion-panel [expanded]="false">
          <mat-expansion-panel-header>
            <mat-panel-title> Console settings </mat-panel-title>
            <mat-panel-description> Customize console settings </mat-panel-description>
          </mat-expansion-panel-header>

          <div>
            <mat-form-field class="full-width-field">
              <input matInput placeholder="console" [value]="consoleCommand" readonly="true">
              <a mat-icon-button matSuffix routerLink="/settings/console"><mat-icon>mode_edit</mat-icon></a>
            </mat-form-field>
          </div>

        </mat-expansion-panel>

        <mat-expansion-panel [expanded]="false">
          <mat-expansion-panel-header>
            <mat-panel-title> Theme settings </mat-panel-title>
            <mat-panel-description> Customize theme settings </mat-panel-description>
          </mat-expansion-panel-header>

          <div class="theme-panel">
            <button mat-raised-button (click)="setDarkMode(false)">Switch to light theme</button>
            <button mat-raised-button (click)="setDarkMode(true)">Switch to dark theme</button>
          </div>

        </mat-expansion-panel>
      </mat-accordion>
    </div>

    <div class="buttons-bar"><button mat-raised-button color="primary" (click)="save()">Save settings</button></div>
  </div>

</div>
